<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>睡眠中心</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <h2 align="center">睡眠报告</h2>
        <input id="deviceCode" type="hidden" disabled="" th:value="*{deviceCode}" class="form-control">
        <div class="panel-body">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>心率波形</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="heart-rate"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>呼吸波形</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="respiratory-rate"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
    var heartNum = 0;
    var heartDataX = [];
    var heartData = [];
    var heartLineChart;
    var respiratoryNum = 0;
    var respiratoryDataX = [];
    var respiratoryData = [];
    var respiratoryLineChart;
    $(function () {
        var heartDivId = "heart-rate";
        heartLineChart = createEchartLine(heartDivId,heartDataX,heartData);

        var respiratoryDivId = "respiratory-rate";
        respiratoryLineChart = createEchartLine(respiratoryDivId,respiratoryDataX,respiratoryData);
        webSocket();
    });
    function webSocket(){
        var stomp = null;
        // var url = "https://sunfu.xdkdate.com/webSocket";
        var url = "http://localhost:8009/webSocket"
        var socket = new SockJS(url);
        stomp = Stomp.over(socket);
        //连接
        stomp.connect({}, function (frame) {
            //订阅广播
            stomp.subscribe("/user/test/message", function (res) {
                var obj = eval('('+res.body+')');
                console.log(obj);
                if($('#deviceCode').val() == obj.deviceCode) {
                    var key = obj.key;
                    var value = obj.value;
                    if(key == "heartRateWave"){
                        for (let i = 0; i < value.length; i++) {
                            heartNum += 1;
                            heartDataX.push(heartNum);
                            heartData.push(value[i]);
                            heartLineChart.setOption({
                                xAxis: {
                                    data: heartDataX
                                },
                                series: [
                                    {
                                        data: heartData
                                    }
                                ]
                            });
                            // $(window).resize(heartLineChart.resize);
                        }
                    }
                    if(key == "breathWave"){
                        for (let i = 0; i < value.length; i++) {
                            respiratoryNum += 1;
                            respiratoryDataX.push(heartNum);
                            respiratoryData.push(value[i]);
                            respiratoryLineChart.setOption({
                                xAxis: {
                                    data: respiratoryDataX
                                },
                                series: [
                                    {
                                        data: respiratoryData
                                    }
                                ]
                            });
                            // $(window).resize(respiratoryLineChart.resize);
                        }
                    }
                }
            });
        });
    }
    function createEchartLine(divId,dataX,data){
        var lineChart = echarts.init(document.getElementById(divId));
        var lineoption = {
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 20,
                    end: 100
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 20,
                    end: 100
                }
            ],
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'line',
                    smooth: true,
                    showSymbol: false
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
        return lineChart;
    }
</script>
</body>
</html>
